<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./jquery.js"></script>
    <link rel="stylesheet" href="./bootstrap-3.4.1/dist/css/bootstrap.css" />
    <script src="./bootstrap-3.4.1/dist/js/bootstrap.js"></script>
  </head>
  <style>
    h2 {
      width: 300px;
      height: 40px;
      background: #ccc;
      border-radius: 20px;
      text-align: center;
      line-height: 40px;
      margin: auto;
    }
    #att {
      width: 60px;
      height: 30px;
      margin-left: 100px;
      margin-top: 20px;
    }
    #all {
      width: 50px;
      height: 30px;
    }
    #tbo{
      width: 800px;
      margin: auto;
    }
    .div1{
      width: 150px;
      height: 50px;
      border: 1px solid #ccc;
      float: left;
    }
    p{
      clear: both;
    }
  </style>
  <body>
    <h2>第一号厅</h2>
    第几排 : <input type="text" id="Rows" /><br /><br />
    第几座 : <input type="text" id="seat" /><br />
    <button id="att">添加</button><br />
    <button id="all">全选</button>
     
      <div id="tbo">
        <!-- <tr>
          <td>
            <button class="q"></button>
            <button class="w"></button>
            <button class="r"></button>
            <button class="f"></button>
        </td>
        </tr> -->
      </div>
   
  
    <!-- <div style="margin-left: 10%;">
    <div id="dialog" style="width: 100px; height: 60px; display: none; border: 1px solid #000;"><input type="checkbox">1排 1座<br>$20</div>
    <div id="control" style="width: 100px; height: 60px; display: none; border: 1px solid #000;"><input type="checkbox">1排 2座<br>$20</div>
    <div id="myModal" style="width: 100px; height: 60px; display: none; border: 1px solid #000;"><input type="checkbox">1排 3座<br>$20</div>
    <div id="aria" style="width: 100px; height: 60px; display: none; border: 1px solid #000;"><input type="checkbox">1排 4座<br>$20</div>
    <div id="dalLabel" style="width: 100px; height: 60px; display: none; border: 1px solid #000;"><input type="checkbox">2排 1座<br>$20</div>
    <div id="modal" style="width: 100px; height: 60px; display: none; border: 1px solid #000;"><input type="checkbox">2排 2座<br>$20</div>
    <div id="header" style="width: 100px; height: 60px; display: none; border: 1px solid #000;"><input type="checkbox">2排 3座<br>$20</div>
    <div id="close" style="width: 100px; height: 60px; display: none; border: 1px solid #000;"><input type="checkbox">2排 4座<br>$20</div>
    <div id="label" style="width: 100px; height: 60px; display: none; border: 1px solid #000;"><input type="checkbox">3排 1座<br>$20</div>
    <div id="title" style="width: 100px; height: 60px; display: none; border: 1px solid #000;"><input type="checkbox">3排 2座<br>$20</div>
    <div id="group" style="width: 100px; height: 60px; display: none; border: 1px solid #000;"><input type="checkbox">3排 3座<br>$20</div>
    <div id="dismiss" style="width: 100px; height: 60px; display: none; border: 1px solid #000;"><input type="checkbox">3排 4座0<br>$20</div>
    
    </div> -->
  </body>
  <script>
    $(function () {
      showList()
      // $('.s').click(function () {
      //     $('.s').css({background: "aqua"})
      //     $('#dialog').css({display: "block"})

      // })
      // $('.e').click(function () {
      //     $('.e').css({background: "aqua"})
      //     $('#control').css({display : "block"})
      // })
      // $('.t').click(function () {
      //     $('.t').css({background: "aqua"})
      //     $('#myModal').css({display : "block"})
      //     $('#control').hide()
      // })
      // $('.a').click(function () {
      //     $('.a').css({background: "aqua"})
      //     $('#aria').css({display : "block"})
      // })
      // $('.q').click(function () {
      //     $('.q').css({background: "aqua"})
      //     $('#dalLabel').css({display : "block"})
      // })
      // $('.w').click(function () {
      //     $('.w').css({background: "aqua"})
      //     $('#modal').css({display : "block"})
      // })
      // $('.r').click(function () {
      //     $('.r').css({background: "aqua"})
      //     $('#header').css({display : "block"})
      // })
      // $('.f').click(function () {
      //     $('.f').css({background: "aqua"})
      //     $('#close').css({display : "block"})
      // })
      // $('.d').click(function () {
      //     $('.d').css({background: "aqua"})
      //     $('#label').css({display : "block"})
      // })
      // $('.x').click(function () {
      //     $('.x').css({background: "aqua"})
      //     $('#title').css({display : "block"})
      // })
      // $('.z').click(function () {
      //     $('.z').css({background: "aqua"})
      //     $('#group').css({display : "block"})
      // })
      // $('.n').click(function () {
      //     $('.n').css({background: "aqua"})
      //     $('#dismiss').css({display : "block"})
      // })
    })
    $("#att").click(function () {
        var Rowsobj = $("#Rows").val(),
            seatobj = $("#seat").val()
        var strhtml = ''
        let listSend=   getOrSetData('listSend')
        for (let i = 0; i < Rowsobj; i++) {
          listSend.push([])
          for (var n = 0; n < seatobj; n++) {
            listSend[i].push({
              num:0,
              name:`${i}排${n}座`,
              jiag:30
            })
          }
        }
        listSend = getOrSetData('listSend',listSend)
        showList()
      })

      $('#tbo').on('click', 'div1',function () {
      $('.div1').toggleClass({background:'green'})
        var Rowsobj=$(this).parent().index();
        var seatobj=$(this).index();
      })

      //点击表格中的某一个单元格，改变背景颜色，并且把行和列显示到id为tit的div中，不能覆盖掉之前的内容，并且弹出提示框
      // $('#tbo').on('click','td',function(){
      //       $(this).css('background','green');
      //       var tr=$(this).parent().index();
      //       var td=$(this).index();
      //       $('#tbo').html('你的座位行是：'+tr+'你的座位列是：'+td);
      //   })

   function showList(){
    listSend = getOrSetData('listSend')
    let html=''
    for(let i in listSend ){
      for(let j in listSend[i]){
              html+=`<div class="div1"></div>`
      }
      html+=`<p></p>`
    } 
    $('#tbo').html(html)
   }

    //存取本地数据
    function getOrSetData(key, data = null, isPush = false) {
      var localData = localStorage.getItem(key)
        ? JSON.parse(localStorage.getItem(key))
        : [];

      if (data) {
        if (isPush) {
          localData.push(data);
          localStorage.setItem(key, JSON.stringify(localData));
        } else {
          localStorage.setItem(key, JSON.stringify(data));
        }
      }
      return localData;
    }
  </script>
</html>
